 <template>
   <!--顶部导航 begin-->
 <div>
   <el-button type="primary" @click="searchFun">搜索</el-button>
   <div class="myDialog">
     <el-dialog
       title="搜索功能"
       :visible.sync="dialogVisible"
       width="20%">
        <div class="divSearch">
          <el-input
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            v-model="inputSearch">
          </el-input>
        </div>
        <div class="navListBox">
          <div class="navList" v-bind:class="{isNavActive:index === isShowNav}" @click="navListFun(index)" v-for="(item, index) in navListData">
            <i class="navListIcon">
              <img :src="item.icon" alt="">
            </i>
            <span>{{item.title}}</span>
            <i class="el-icon-d-arrow-right jumpIcon"></i>
          </div>
        </div>
     </el-dialog>
   </div>
 </div>
   <!--顶部导航 end-->
</template>

<script>
import gateway from '@/assets/images/myImg/gateway.png'
import more from '@/assets/images/myImg/more.png'
import contract from '@/assets/images/myImg/contract.png'
import gl from '@/assets/images/myImg/gl.png'
export default {
  data() {
    return {
      isShowNav: null,
      navListData: [
        {
          icon: gl,
          title: '表单管理1'
        },
        {
          icon: gl,
          title: '表单管理2'
        }, {
          icon: gl,
          title: '表单管理3'
        }, {
          icon: gl,
          title: '表单管理4'
        }, {
          icon: gl,
          title: '表单管理5'
        }, {
          icon: gl,
          title: '表单管理6'
        }, {
          icon: gl,
          title: '表单管理7'
        }, {
          icon: gl,
          title: '表单管理8'
        }, {
          icon: gl,
          title: '表单管理9'
        }
      ],
      inputSearch: '',
      dialogVisible: false,
      gateway,
      more,
      contract,
      gl,
      navBarListNum: 0
    }
  },
  components: {

  },
  methods: {
    navListFun(i) {
      this.isShowNav = i
    },
    searchFun() {
      this.dialogVisible = true
    },
    navBarFun(index) {
      this.navBarListNum = index
    }
  }
}
</script>
<style scoped>
  .navListIcon{
    display: inline-block;
    width: 15px;
    height: 15px;
    vertical-align: middle;
  }
  .navListIcon img{
    width: 100%;
  }
  .myDialog >>> .el-dialog__body{
    padding: 6px 20px;
  }
  .myDialog >>> .el-dialog{
    margin-left: 80%;
    margin-top: 0 !important;
    height: 100%;
  }
.navBarBox{
  width: 100%;
  background-color: #37474f;
}
  .inlineList{
    display: inline-block;
    vertical-align: middle;
    height: 60px;
    cursor: pointer;
  }


  .navList{
    cursor: pointer;
  }
  .navList:first-child{
    margin-top: 20px;
  }
  .navList:hover, .isNavActive{
    background-color: #F2F2F2;
  }
  .navListIcon{
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-left: 12px;
  }
  .navList span{
    display: inline-block;
    line-height: 40px;
    vertical-align: middle;
    margin-left: 8px;
  }
  .jumpIcon{
    display: inline-block;
    width: 15px;
    height: 15px;
    float: right;
    margin-top: 14px;
    margin-right: 12px;
  }
</style>

